<script setup>
import { ref } from 'vue'
const { ipcRenderer } = window.electronApi

// 本地连接码
const localConnectCode = ref('')
async function getCode() {
  const res = await ipcRenderer.invoke('getConnectCode')
  localConnectCode.value = res.toString()
}
getCode()

// 连接其他主机
const targetConnectCode = ref('')
const connectBtn = () => {
    if(targetConnectCode.value.length !== 6) {
        console.log('输入错误，连接码为6位数')
        return
    }
    ipcRenderer.send('connectControl', targetConnectCode.value)
}
let connectState = ref('1') // 1：未开始连接；2：连接中；3：连接成功
ipcRenderer.on('changeStatus', (event, code, state) => {
    // console.log('连接成功', state)
    connectState.value = state
}) 
</script>

<template>
    <div v-if="connectState === '1'">
        <p>本机连接码：{{localConnectCode}}</p>
        <input type="text" v-model="targetConnectCode" placeholder="输入目标连接码">
        <button @click="connectBtn">连接</button>
    </div>
    <p v-else-if="connectState === '2'">
        正在连接中...
    </p>
    <p v-else-if="connectState === '3'">
        连接成功：正在控制{{targetConnectCode}}
    </p>
</template>

<style lang="" scoped>
    
</style>